<template>
  <div class="login_view">
    <div class="main">
      <div class="login_view_header">
        <img
          src="@/assets/images/m_logo.png"
          class="login_view_header_logo"
        />
      </div>
      <div class="login_view_container">
        <div class="login_view_container_form">
          <h3 class="login_view_container_form_title">欢迎使用颐信巧思数智化系统</h3>
          <div class="login_view_container_form_control">
            <a class="login_view_container_form_control_tip" v-if="state.focus1 || login.userName">账号</a>
            <a class="login_view_container_form_control_tips" v-if="!state.focus1 && !login.userName">请输入账号</a>
            <a-input
              v-model:value="login.userName"
              type="text"
              class="login_view_container_form_control_value"
              :class="[(state.focus1 || login.userName) ? 'login_view_container_form_control_values' : '']"
              @focus="toggleFocus('userName')" 
              @blur="removeFocus('userName')"
              autocomplete="new-username"
            />
          </div>
          <div class="login_view_container_form_control">
            <a class="login_view_container_form_control_tip" v-if="state.focus2 || login.passWord">密码</a>
            <a class="login_view_container_form_control_tips" v-if="!state.focus2 && !login.passWord">请输入密码</a>
            <a-input
              v-model:value="login.passWord"
              :type="state.type"
              class="login_view_container_form_control_value"
              :class="[(state.focus2 || login.passWord) ? 'login_view_container_form_control_values' : '']"
              @focus="toggleFocus('passWord')" 
              @blur="removeFocus('passWord')"
              autocomplete="new-password"
            />
            <i v-if="state.show" class="iconfont login_view_container_form_control_icon" @click="onShowPwd()">&#xe6d4;</i>
            <i v-else class="iconfont login_view_container_form_control_icon" @click="onShowPwd()">&#xe6b1;</i>
            <!-- <img
              :src="state.show ? eyeOn : eyeOff"
              class="login_view_container_form_control_icon"
              @click="onShowPwd()"
            /> -->
          </div>
          <div class="login_view_container_form_agree">
            <a-checkbox v-model:checked="login.remember">
              我已阅读并同意颐信巧思 <a @click="showDetail($event)">《用户协议》</a> 和 <a @click="showDetail($event)">《隐私政策》</a>
            </a-checkbox>
          </div>
          <div class="login_view_container_form_action">
            <div @click="loginSubmit" class="login_view_container_form_submit">登录</div>
            <!-- <p class="login_view_container_form_cancel">取消</p> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import eyeOn from '@/assets/images/eye-on.png';
import eyeOff from '@/assets/images/eye-off.png';
import '@/utils/rem';
import {
  getLogin,
  getScmLogin,
  getWelynkLogin
} from '@/api/user';
const Route = useRoute();
const router = useRouter();
const login = reactive({
  userName: '',
  passWord: '',
  remember: true,
});
const state = reactive({
  show: false,
  type: 'password',
  focus1: false,
  focus2: false,
});

let companyAppId = reactive({
  'agsitech': '64760f89d660d20008f28161',
  'feihongda': '645f300f304b76000886b51b',
  'huixin': '648413a12b740b0008c630a7',
  'dongpin': '64880dc1f3ecc50008fbae61',
  'pdm': '6522737c3b151d57d1890569',
  // 'pdm': '6522737a4c7d6516277a3c94',
  // 'scm': '6522737a4c7d6516277a3c94',
  'scm': '6522737c3b151d57d1890569',
})

// let host = window.location.host;
// let companyAppId = reactive({
//   'localhost:5173': '64760f89d660d20008f28161',
//   'https://jiandaoyun.com/': '645f300f304b76000886b51b'
// })
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
const showDetail = (e) => {
  e.stopPropagation(); 
}
const loginSubmit = () => {
  let {
    userName,
    passWord
  } = login;
  if (!userName) {
    message.error('请输入用户名');
    return;
  }
  if (!passWord) {
    message.error('请输入密码');
    return;
  }
  let params = {
    userName,
    passWord,
    // company: companyAppId[import.meta.env.MODE]
    company: companyAppId[Route.meta.name]
  }
  if (Route.meta.name === 'scm') {
    getScmLogin(params)
      .then(res=>{
        let {
          message
        } = res;
        window.location.href = message;
      })
  }
  else if (Route.meta.name === 'sso') {
    getWelynkLogin(params)
      .then(res => {
        sessionStorage.setItem('sso', JSON.stringify(res));
        router.push({
          path: '/redirect',
        });
      });
  }
  else {
    getLogin(params)
      .then(res=>{
        let {
          message
        } = res;
        window.location.href = message;
      })
  }
}
const onShowPwd = () => {
  state.show = !state.show;
  state.show ? state.type = 'text' : state.type = 'password';
}
const toggleFocus = (key) => {
  if (key == 'userName') {
    state.focus1 = true;
    state.focus2 = false;
  } else {
    state.focus1 = false;
    state.focus2 = true;
  }
}
const removeFocus = (key) => {
  if (key == 'userName') {
    state.focus1 = false;
  } else {
    state.focus2 = false;
  }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
